// 品牌世界 > 热门品牌
<template>
  <div>
    <div class="banradk">
      <h5>{{ title }}</h5>
      <ul>
        <li v-for="item in content" :key="item.id" @click="jumpDetails(item.id)">
          <div>
            <img :src="item.brand_logo" :alt="item.brand_title">
          </div>

          <p>{{ item.brand_title }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "popularBrand",

  data() {
    return {
      title: "热门品牌推荐",
      content: []
    }
  },

  methods: {
    async getBrand() {
      let res = await this.$http({
        method: "post",
        url: "/api/index/api/brandWorld",
        data: {
          page: 1
        }
      })
      if (res.data.State.Code == 200) {
        this.content = res.data.data.slice(0, 5)   // 截取五个
      }
      console.log(res.data.data)
    },

    jumpDetails(id) {
      this.$router.push({
        name: "brandDetails",
        params: {
          id
        }
      })
    }
  },
  mounted() {
    this.getBrand()
  }
}
</script>
<style lang="scss" scoped>
.banradk {
  border: 1px solid #e3e3e3;
  overflow: hidden;
  h5 {
    line-height: 30px;
    border-bottom: 1px solid #e3e3e3;
    padding-left: 15px;
    color: #4e4e4e;
    letter-spacing: 0.5px;
  }
  ul {
    display: flex;
    flex-direction: row;
    li {
      padding: 5px 15px;
      margin: 10px 31px;
      cursor: pointer;
      &:hover {
        img {
          transform: scale(1.05, 1.05);
        }
        p {
          color: #0a83e7;
        }
      }
      p {
        width: 128px;
        padding: 10px 10px;
        font-size: 12px;
        color: #565656;
        text-align: center;
        transition: all ease-in-out 0.5s;
        letter-spacing: 1px;
      }
      div {
        width: 148px;
        height: 56px;
        border: 1px solid rgba(204, 204, 204, 0.164);
        img {
          width: 148px;
          height: 56px;
          transition: all ease-in-out 0.5s;
        }
      }
    }
  }
}
</style>
